<template>
	<div>
		<Panle title='用户管理' content="用户管理超级管理员不允许删除"></Panle>
		<div class="searchbar">
			<el-row class="pt20">
			  <el-col :span="12">
				  <el-button size="mini" @click="init()">刷新</el-button>
				  <PersButton icon="el-icon-edit" size="mini" @click="add()" perms="sys:user:add" type="primary" label="添加"></PersButton>
			      <PersButton type="danger" size="mini" icon="el-icon-delete"  @click="delAll()"  perms="sys:user:del" label="批量删除" ></PersButton>
			  </el-col>
			  <el-col :span="12" style="text-align: right;">
			  	<el-form :inline="true" :model="formInline" class="demo-form-inline">
			  		
			  	  <el-form-item label="">
			  	    <el-input v-model="formInline.keyword" size="mini" placeholder="请输入用户名称"></el-input>
			  	  </el-form-item>
			  	  
			  	  <el-form-item>
			  	    <el-button type="primary"  size="mini" @click="serach">查询</el-button>
			  	  </el-form-item>
			  	</el-form>
			  </el-col>
			</el-row>  
		</div>
		
		<el-table
					:data="tableData"
		style="width: 100%;margin-bottom: 20px;" 
		row-key="id" 
		border 
		stripe 
		default-expand-all  
		v-loading="loading"
		@selection-change="handleSelectionChange"
		>
		<el-table-column
		  type="selection"
		  width="55">
		</el-table-column>
		<el-table-column prop="user_id" label="编号"  width="55"></el-table-column>
		<el-table-column prop="avatar" label="头像">
			<template slot-scope="scope">
				<el-image
				  style="width: 50px; height: 50px"
				  :src="scope.row.avatar" 
				  :preview-src-list="[scope.row.avatar]" v-if="scope.row.avatar!=null" >
				</el-image>
			</template>
		</el-table-column>
		<el-table-column prop="username" label="用户名称" ></el-table-column>
		<el-table-column prop="nick_name" label="妮称" ></el-table-column>
		<el-table-column prop="status" label="是否启用" >
			<template slot-scope="scope">
			  <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" @change="changeSwitch(scope.row)" :active-value="1" :inactive-value="0"></el-switch>
			</template>
		</el-table-column>
		<el-table-column prop="create_time" label="创建时间" ></el-table-column>
		<el-table-column prop="mobile" label="手机号码" ></el-table-column>
		<el-table-column prop="role_id" label="操作" >
					  <template slot-scope="scope">
					  <PersButton type="text" size="mini" label="编辑" icon="fa  fa-pencil" perms="sys:user:edit" @click="editUsers(scope.row)"></PersButton>
					  <PersButton type="text" size="mini" icon="el-icon-delete" perms="sys:user:del" label="删除" @click="delUsers(scope.row)"></PersButton>
		    </template>
		</el-table-column>
		</el-table>
		<div class="block">
		    
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="pageNumber"
		      :page-sizes="[10, 50, 100, 200]"
		      :page-size="pageSize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		  </div>
		  <!-- 添加角色 -->
		  <el-dialog :visible.sync="open" width="600px" append-to-body :title="!form.user_id ? '新增用户' : '修改用户'"  >
		  		   <el-form ref="form" :model="form" :rules="rules" label-width="80px">
		  		     <el-row>
		  				 
		  			  
		  			  
		  			   <el-col :span="12">
		  			     <el-form-item label="用户名称" prop="username">
		  			       <el-input v-model="form.username" placeholder="请输入用户名称" size="small" clearable />
		  			     </el-form-item>
		  			   </el-col>
					   <el-col :span="12">
					     <el-form-item label="用户妮称" prop="nick_name">
					       <el-input v-model="form.nick_name" placeholder="请输入用户妮称" size="small" clearable />
					     </el-form-item>
					   </el-col>
		  			 <el-col :span="12">
		  			   <el-form-item label="密码" prop="password">
		  			     <el-input v-model="form.password" type="password" placeholder="请输入用户密码" size="small" clearable />
		  			   </el-form-item>
		  			 </el-col>
					 
					 
					 <el-col :span="12">
					   <el-form-item label="所属角色" prop="role">
					     <el-select v-model="form.role" multiple placeholder="请选择" size="small" style="width:100%">
					      <el-option
					         v-for="item in roleslist"
					         :key="item.role_name"
					         :label="item.role_name"
					         :value="item.role_id">
					       </el-option>
					     </el-select>
					   </el-form-item>
					 </el-col>
					
					 <el-col :span="12">
					   <el-form-item label="邮箱地址" prop="email">
					     <el-input v-model="form.email" placeholder="请输入邮箱地址" size="small" clearable />
					   </el-form-item>
					 </el-col>
					 <el-col :span="12">
					   <el-form-item label="联系电话" prop="mobile">
					     <el-input v-model="form.mobile" placeholder="请输入联系电话" size="small" clearable />
					   </el-form-item>
					 </el-col>
					 <el-col :span="12" >
					    <el-form-item  label="性别" prop="sex">
					      <el-radio-group v-model="form.sex">
					        <el-radio :label="0">男</el-radio>
					        <el-radio :label="1">女</el-radio>
					      </el-radio-group>
					    </el-form-item>
					  </el-col>
					 <el-col :span="12" >
					   <el-form-item  label="是否启用" prop="status">
					     <el-radio-group v-model="form.status">
					       <el-radio :label="1">是</el-radio>
					       <el-radio :label="0">否</el-radio>
					     </el-radio-group>
					   </el-form-item>
					 </el-col>
		  			<el-col :span="24">
		  			  <el-form-item label="备注" >
		  										
		  			    <el-input v-model="form.remark" type="textarea" placeholder="请输入角色名称" size="small" clearable />
		  			  </el-form-item>
		  			</el-col>
		  			  <el-col :span="24">
					  <el-form-item label="用户头像" >
					    <div class="uploadcol">
					    <div class="uploadborder">
					      <img :src="form.avatar" width="100%" height="100%"/>
					    </div>
					    <el-button type="primary" @click="openUploadDial()" size="mini" style="margin-top:10px">上传头像</el-button>
					    </div>
					  </el-form-item>
					  </el-col>
		  			  
		  			   
		  			
		  			 
		  			
		  			
		  		     </el-row>
		  			</el-form>
		  			<div slot="footer" class="dialog-footer">
		  			  <el-button @click="open = false" size="small">取 消</el-button>
		  			  <el-button type="primary"  @click="!form.user_id ? submitForm('form') : subEditForm('form') " size="small">确 定</el-button>
		  			</div>
		  			
		  </el-dialog>
		   <Upload :show="clickType" @update="cleanDiaglog" :selectType="imgnum" @selectSure="selectImgs" :type="0"></Upload>
	</div>
</template>

<script>
	var _self;
	let imgUrl = process.env.VUE_APP_BASE_API_IMG;
	import Panle from '@/components/Panle'
	import PersButton from '@/components/PersButton'
	import {listUsers,addUsers,editUsers,findUserRole,delUsers,batchRemove} from '@/api/system/user'
	import {listRole} from '@/api/system/role'
	import Upload from '@/components/Upload'
	export default{
		components:{
			Panle,
			PersButton,
			Upload
		},
		data(){
			return{
				formInline:{},
				loading:false,
				pageSize:10, //一页显示多少条
				pageNumber:1,
				total:0,//总页数
				tableData:[],
				serachword:'',
				open:false,
				form:{
					avatar:"",
					"username":"",
					"password":"",
					"status":1,
					"mobile":"",
					"sex":0,
					"remark":"",
					"avatar":""
				},
				rules:{
					username:[
						{ required: true, message: "角色名称不能为空", trigger: "blur" }
					],
					password:[
						{ required: true, message: "密码不能为空", trigger: "blur" }
					],
					role:[
						{ required: true, message: "所属角色不能为空", trigger: "blur" }
					],
					status:[
						{ required: true, message: "是否启用", trigger: "blur" }
					]
				},
				
				
				
				clickType:false,
				imgnum:1,//选择图片数量
				
				roleslist: [],
				imgURL:imgUrl,
				multipleSelection:[]
			}
		},
		created() {
			_self =this;
			_self.init();
		},
		methods:{
			init:function(){
				_self.loading=true;
				let param={"pageSize":_self.pageSize,"pageNumber":_self.pageNumber,"keyword":_self.serachword}
				listUsers(param).then((res)=>{
					console.log(res);
					if(res.code==200){
						_self.tableData=res.data.list;
						_self.total = res.data.total;
						_self.loading=false;
					}
				})
				listRole().then((res)=>{
					if(res.code==200){
						_self.roleslist=res.data;
					}
				})
				
			},
			add:function(){
				_self.open=true;
			},
			
			submitForm:function(data){
				console.log(_self.form);
				//return false;
				_self.$refs[data].validate((valid) => {
					if (valid) {
						addUsers(_self.form).then((res)=>{
							console.log(res)
							if(res.code==200){
								_self.msgSuccess(res.msg);
								_self.init();
								_self.open=false;
							}else{
								_self.msgError(res.msg);
							}
						})
					}else{
						 return false;
					}
				})
			},
			handleSizeChange:function(e){
			    console.log(e);
			    _self.pageSize = e;
			    _self.init();
			},
			handleCurrentChange:function(e){
			    console.log(e);
			    _self.pageNumber=e;
			    _self.init();
			},
			handleSelectionChange:function(e){
			  console.log(e);
			  let selectChang=[]
			  for(let item of e){
			    selectChang.push(item.user_id)
			   
			  }
			  _self.multipleSelection =selectChang;
			  console.log(selectChang);
			},
			openUploadDial:function(){
			  
			  _self.clickType = true;
			},
			selectImgs:function(res){
			  
			  _self.clickType =true;
			  _self.form.avatar =imgUrl+res[0].urls
			    
			   
			},
			cleanDiaglog:function(shows){
			  
			  _self.clickType = false;
			},
			editUsers:function(data){
				console.log(data);
				_self.form.user_id = data.user_id;
				findUserRole(data.user_id).then((res)=>{
					if(res.code==200){
						_self.form.role = res.data;
					}
				})
				let editForm ={
					
					"username":data.username,
					"password":data.password,
					"status":data.status,
					"mobile":data.mobile,
					"sex":data.sex,
					"remark":data.remark,
					"avatar":data.avatar
					}
				Object.assign(_self.form,editForm);
				_self.open=true;
			},
			subEditForm:function(data){
				console.log(_self.form);
				
				_self.$refs[data].validate((valid) => {
					if (valid) {
						editUsers(_self.form).then((res)=>{
							if(res.code==200){
								_self.msgSuccess(res.msg);
								_self.init();
								_self.open=false;
								
							}else{
								_self.msgError(res.msg);
							}
						})
					}else{
						 return false;
					}
				})
			},
			delUsers:function(data) {
			  _self.$confirm('确定删除【' + data.username + '】此用户', '提示', {
			    confirmButtonText: '确定',
			    cancelButtonText: '取消',
			    type: 'warning'
			  }).then(() => {
			    
				delUsers(data.user_id).then((res)=>{
					if(res.code==200){
						_self.msgSuccess(res.msg);
						_self.init();
					}else{
						_self.msgError(res.msg);
					}
				})
			
				
			  }).catch(() =>{
			    _self.$message({
			      type: 'info',
			      message: '已取消删除'
			    });
			  });
			},
			delAll:function(){
			   
			  if(_self.multipleSelection.length==0){
			     _self.$alert('请选择要删除的数据', '系统提示', {
			     confirmButtonText: '确定',
			     type: 'error',
			    }); 
			    return false;     
			  }
			     _self.$confirm('此操作将永久删除此数据, 是否继续?', '提示', {
			     confirmButtonText: '确定',
			     cancelButtonText: '取消',
			     type: 'warning'
			   }).then(() => {
				   let data={ids:_self.multipleSelection}
				   batchRemove(data).then((res)=>{
					   if(res.code==200){
						   _self.msgSuccess(res.msg);
						   _self.init();
					   }else{
						   _self.msgError(res.msg);
					   }
				   })
				   
				   
				   
				   
			    
			   }).catch(() => {
			     this.$message({
			       type: 'info',
			       message: '已取消删除'
			     });    
			     _self.$refs.multipleTable.clearSelection();      
			   });
			 
			},
			serach:function(){
				_self.serachword = _self.formInline.keyword;
				
				_self.init();
			}
		}
		
		}
</script>

<style>
	.pt20{
		padding-top: 10px;
	}
	.el-table{
		margin-top: 10px;
		
	}
	.el-table__header tr,
	  .el-table__header th {
	    padding: 0 !important;
	    height: 40px;
	    font-size: 12px;
	    text-align: center;
	}
	.el-table__body tr,
	  .el-table__body td {
	    padding: 0 !important;
	    height: 40px;
	    font-size: 12px;
	    text-align: center;
	}
	.block{
	    padding: 10px;
	    text-align: left;
	}
	.pt20 .el-form-item{margin-bottom: 0;}
	.el-dialog__header{
		background: #2f353f;
		padding: 10px 20px 10px;
	}
	
	.el-dialog__title{
		font-size: 14px;
		color: #FFFFFF !important;
	}
	.el-dialog__headerbtn{
		top: 12px;
	}
	.el-form-item__label{
		font-size: 12px;
	}
	.el-radio__label{
		font-size: 12px;
	}
	.el-input-number--small{
		width: 100%;
	}
	
	.el-tree{
	  max-height: 200px;
	  overflow: auto;
	  background: #f7f7f7;
	}
	.el-tree-node__label,.el-textarea__inner{
	  font-size: 12px;
	}
	.groupmenu .el-tree-node__children .el-tree-node__children .el-tree-node__children  .el-tree-node__content{
	    float:left;
	    width:100px;
	}
	.uploadcol{
	  display: flex;
	  flex-flow: column;
	  width: 100px;
	}
	.uploadborder{
	  border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    /* cursor: pointer;
	    position: relative;
	    overflow: hidden; */
	    width: 100px;
	    height: 100px;
	}
</style>
